Puedes ver mi código a continuación. Se supone que el estilo del texto dentro del elemento span cambia después de que el usuario marque cualquiera de las casillas de verificación, pero no es así. Traté de imprimir el elemento span en la consola después de obtenerlo a través de nextElementSibling y el resultado fue 'indefinido'. ¿Por qué?
const checkBoxes = document.querySelectorAll('input[type=checkbox]'); let j = 0, l = checkBoxes.length; for (j; j < length; j++) { checkBoxes[j].addEventListener("change", () => { const spanElement = this.nextElementSibling; console.log(spanElement); if (this.checked) { spanElement.style.textDecoration = "line-through"; } else { spanElement.style.textDecoration = ""; } }); }; ul { list-style-type: none; } <h2>To-Do List</h2> <input id="input-task" type="text"> <button id="add-task-button">Add Task</button> <ul id="task-list"> <li> <input type="checkbox"> <span class="task"> Send email to Bob </span> <button class="delete-btn">Delete Task</button> </li> <li> <input type="checkbox"> <span class="task"> Take vitamin D </span> <button class="delete-btn">Delete Task</button> </li> <li> <input type="checkbox"> <span class="task"> Practice coding problems </span> <button class="delete-btn">Delete Task</button> </li> </ul>Es debido a la función de arrow que no tiene su propio alcance lexical , sino que toma el que está definido. ¡Reemplácelo con la sintaxis de la function y listo!
window.addEventListener('DOMContentLoaded', () => { const checkBoxes = document.querySelectorAll('input[type=checkbox]'); let j = 0, l = checkBoxes.length; for (j; j < l; j++) { checkBoxes[j].addEventListener("change", function(){ const spanElement = this.nextElementSibling; console.log('here', spanElement); if (this.checked) { spanElement.style.textDecoration = "line-through"; } else { spanElement.style.textDecoration = ""; } }); } }) ul { list-style-type: none; } <h2>To-Do List</h2> <input id="input-task" type="text"> <button id="add-task-button">Add Task</button> <ul id="task-list"> <li> <input type="checkbox"> <span class="task"> Send email to Bob </span> <button class="delete-btn">Delete Task</button> </li> <li> <input type="checkbox"> <span class="task"> Take vitamin D </span> <button class="delete-btn">Delete Task</button> </li> <li> <input type="checkbox"> <span class="task"> Practice coding problems </span> <button class="delete-btn">Delete Task</button> </li> </ul>